<template>
  <div class="venus-list-page">
    <!--签约查询界面-->
    <div class="page-search">
      <el-row type="flex" class="search-list">
        <el-row type="flex" class="list-items">
          <div class="venus-input-box">
            <label>批量编号</label>
            <el-input
              v-model="table.prod_table.plbh"
              class="venus-input-middle"
              placeholder="请输入批量编号"
            />
          </div>
          <div class="venus-input-box">
            <label>代理业务号</label>
            <el-input
              v-model="table.prod_table.dlywh"
              class="venus-input-middle"
              placeholder="请输入代理业务号"
            />
          </div>
          <div class="venus-input-box">
            <label>起始日期</label>
            <el-date-picker
              v-model="table.prod_table.start_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入起始日期"
            />
          </div>
          <div class="venus-input-box">
            <label>结束日期</label>
            <el-date-picker
              v-model="table.prod_table.end_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入截止日期"
            />
          </div>
        </el-row>
        <!--      </el-row>-->
        <!--      <el-row type="flex" justify="end">-->
        <div class="venus-btn-box">
          <el-button type="primary" @click="search">查询</el-button>
          <!--          <el-button type="primary">退出</el-button>-->
          <el-button type="primary" @click="openForm">新增</el-button>
          <el-button type="primary" @click="openfunc">跳转</el-button>
        </div>
      </el-row>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
        <el-button type="primary">签约结果下载</el-button>
      </el-row>
      <table-pagination
        :dict-data="dict"
        :table-data="table.prod_table.tableData"
        :table-header-config="table.tableHeaderConfig"
         highlight-current-row
        :total="table.prod_table.total"
        :page-size="table.prod_table.limit"
        :now-page="table.prod_table.nowPage"
        @current-change="currentChange"
      />
    </div>
    <!-- Form -->
    <el-dialog title="新增产品系列" :visible.sync="form.addForm.dialogFormVisible">
      <el-form :model="form.addForm" size="mini">
        <el-row type="flex">
          <el-col>
              <el-form-item label="产品系列代码" :label-width="style.formLabelWidth">
                  <el-input v-model="form.addForm.name"></el-input>
              </el-form-item>
          </el-col>
          <el-col>
              <el-form-item label="产品系列名称" :label-width="style.formLabelWidth">
                  <el-input v-model="form.addForm.name" ></el-input>
              </el-form-item>
          </el-col>

        </el-row>
        <el-row type="flex">
          <el-col>
              <el-form-item label="产品品牌" :label-width="style.formLabelWidth">
                  <el-input v-model="form.addForm.resource" ></el-input>
              </el-form-item>
          </el-col>
          <el-col>
              <el-form-item label="命名规则" :label-width="style.formLabelWidth">
                  <el-select v-model="form.addForm.region" placeholder="请选择活动区域">
                    <el-option
                      v-for="(text,key) in dict.prod_name_rule"
                      :key="key"
                      :label="text"
                      :value="key">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="closeForm">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import router from '@/router/index'
import * as kk from '../../../utils/k-utils'
  export default {
    name: 'SignSearch',
    data() { // 数据定义
      return {
        //数据字典
        dict:{
          prod_name_rule:{}
        },
        //table表格
        table:{
          tableHeaderConfig: [ // 表头配置
            { prop: 'id', label: '序号' },
            { prop: 'prod_series_code', label: '系列代码1' },
            { prop: 'prod_series_name', label: '系列名称' },
            { prop: 'prod_name_rule', label: '产品品牌' }
          ],
          prod_table:{
            limit: 5, //分页配置
            total: 0,//数据总条数
            nowPage: 1,//当前页
            tableData: [], //表格数据
            exeid:'getProdSeries',//exeid
            //以下是查询参数
            plbh: '',
            dlywh: '',
            start_date: '',
            end_date: ''
          }
        },
        //form表单
        form:{
          addForm: {
            dialogFormVisible:false,
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          }
        },
        //样式
        style:{
          formLabelWidth: '120px'
        }
      }
    },
    mounted:function(){
      //加载数据字典
      kk.k_load_dict(this,'prod_name_rule','t8_prod_series_name');//加载数据字典--注意命名规则尽量与表格保持一致，没有表格可以自定义命名
    },
    methods: {
      // 查询函数
      search() {
        this.table.prod_table.nowPage=1;//初始第一页
        kk.k_load_table(this,'prod_table','prod');
      },
      //下一页触发的事件
      currentChange(index){
        this.table.prod_table.nowPage=index;
        kk.k_load_table(this,'prod_table','prod');
      },
      openForm() {
        this.form.addForm.dialogFormVisible=true;
      },
      closeForm() {
        this.form.addForm.dialogFormVisible=false;
      },
      submitForm() {
        this.form.addForm.dialogFormVisible=false;
        alert(JSON.stringify(this.form.addForm));
      },
      openfunc(){
        this.$router.push({
          name:'worth_assets_amount123'
        })
      }
    }
  }


</script>

